<template>
    <div class="person">
        <h2>一辆{{ car.brand }}车,价值{{ car.price }}万</h2>
        <button @click="changeBrand">修改汽车的品牌</button>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeCar">修改汽车</button>
        <h2>另一辆{{ car2.brand }}车,价值{{ car2.price }}万</h2>
        <button @click="changeCar2">修改汽车2</button>
        <hr>
        <h2>当前求和为: {{ sum }}</h2>
        <button @click="changeSum">点我sum+1</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { ref, reactive } from 'vue'

let car = reactive({ brand: "BYD", price: 10000 })
let car2 = ref({ brand: "奇瑞", price: 1000 })
let sum = ref(0)

const changeBrand = () => {
    car.brand = "长城"
}
const changePrice = () => {
    car.price += 10
}
const changeCar = () => {
    // 不能用 car = reactive(...)
    // 这里只是修改car内部的属性,car本身并没有被替换,还是原来那个对象
    Object.assign(car, { brand: "奔驰", price: 100 })
}
const changeCar2 = () => {
    // 这才是真正的用新的匿名对象替换掉car2.value
    car2.value = { brand: "宝马", price: 200 }
}
function changeSum() {
    sum.value++
}
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>